<template>
  <view>
    <view class="add-new" @click="albumAddNew">{{ addNewOn ? "×" : "+" }}</view>
    <view v-if="addNewOn" class="add-new-form">
      <form @submit="createNewAlbumSubmit">
        <view>
          <input
            class="input-form"
            type="text"
            placeholder="请输入相册名"
            name="albumName"
          />
          <textarea
            class="input-form"
            placeholder="请输入相册描述"
            name="albumDescription"
          ></textarea>
          <view class="input-form">
            <text>相册是否公开</text>
            <switch checked name="albumPublic" />
          </view>
        </view>
        <button type="primary" form-type="submit">新建相册</button>
      </form>
    </view>
    <view v-else>
      <view v-if="albumList.length !== 0">
        <view
          class="album-thumbnail"
          v-for="(item, index) in albumList"
          :key="(item, index)"
          :data-albumid="item.album_id"
          @click="gotoAlbumDetail"
        >
          <image
            class="img-thumbnail"
            :src="item.thumbnail"
            mode="aspectFill"
          ></image>
          <view
            style="margin-left: 20upx; white-space: nowarp; overflow: hidden"
          >
            <view class="album-name">{{ item.album_name }}</view>
            <view class="album-discription">{{
              item.album_description
            }}</view></view
          >
        </view>
      </view>
      <view v-else>
        <view class="inline-text no-album-info"> 点击加号建立第一个相册 </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      // TODO: 发送请求，获取已有的相册列表
      // 而后同步或异步地请求相册的预览页面
      albumList: [
        // {
        //   thumbnail: "/static/temp_pics/pic1.jpeg",
        //   name: "12345620211211143149",
        //   discription: "测试相册1",
        // },
        // {
        //   thumbnail: "/static/temp_pics/pic2.jpeg",
        //   name: "相册2",
        //   discription: "测试相册2",
        // },
      ],
      addNewOn: false,
    };
  },
  onLoad: function () {
    if (!this.hasLogin) {
      uni.navigateTo({ url: "/pages/login/login" });
      return;
    }
    uni.showLoading({ title: "加载中" });
    this.getAlbumIds();
  },
  mounted: function () {
    uni.$on("popalbum", this.popAlbum);
  },
  computed: mapState(["hasLogin", "localData"]),
  methods: {
    popAlbum: function (e) {
      console.log("pop", e);
      for (let i = 0; i < this.albumList.length; i++) {
        if (this.albumList[i].album_id === e.album_id) {
          this.albumList.splice(i, 1);
        }
      }
    },
    albumAddNew: function () {
      if (!this.hasLogin) {
        uni.navigateTo({ url: "/pages/login/login" });
        return;
      }
      if (!this.addNewOn) {
        console.log("new Album");
      }
      this.addNewOn = !this.addNewOn;
    },
    gotoAlbumDetail: function (e) {
      //   console.log(e);
      uni.navigateTo({
        url:
          "/pages/details/albumDetail" +
          "?albumid=" +
          encodeURIComponent(
            JSON.stringify({
              id: e.currentTarget.dataset.albumid,
              phone: this.localData.phone,
            })
          ),
        // e.currentTarget.dataset.albumid,
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    getAlbumInfoFromId: function (pic_id) {
      let postData = {
        option: "getAlbumInfo",
        pic_id: pic_id,
      };
      this.$http
        .post(this.urlApi.album, postData)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({ title: "相册信息请求失败", icon: "error" });
        });
    },
    getAlbumIds: function () {
      // TODO
      // console.log(this.localData.phone);
      console.log("数据请求中");
      this.$http
        .post(this.urlApi.album, {
          option: "getAlbumId",
          user_phone: this.localData.phone,
        })
        .then((res) => {
          // let status = res.data.status;
          // console.log("res", res.data);
          // console.log(ids);
          this.albumList = res.data;
          for (let i = 0; i < this.albumList.length; i++) {
            this.albumList[i].thumbnail = "/static/temp_pics/album_empty.jpg";
          }
          uni.hideLoading();
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({ title: "相册加载失败", icon: "error" });
        });
    },
    createNewAlbumSubmit: function (e) {
      uni.showLoading({ title: "加载中" });
      let data = e.detail.value;
      let postdata = {
        option: "create",
        album_name: data.albumName,
        album_description: data.albumDescription,
        album_owner: this.localData.phone,
        album_public: data.albumPublic ? "pub" : "pri",
      };
      console.log(postdata);
      this.$http
        .post(this.urlApi.album, postdata)
        .then((res) => {
          uni.hideLoading();
          let status = res.data.status;
          console.log(res.data);
          switch (status) {
            case this.$responseCode.createAlbum.success: {
              uni.showToast({
                title: "创建成功" + res.data.album_createtime,
                icon: "success",
              });
              // this.albumList.push({
              //   thumbnail: "/static/temp_pics/album_empty.jpg",
              //   album_name: data.album_name,
              //   album_description: data.album_description,
              // });
              this.getAlbumIds();
              setTimeout(() => {
                this.addNewOn = false;
              }, 1000);
              break;
            }
            case this.$responseCode.createAlbum.fail: {
              uni.showToast({ title: "创建失败", icon: "error" });
              break;
            }
          }
        })
        .catch((err) => {
          uni.showToast({ title: "请求失败", icon: "error" });
          console.log(err);
        });
    },
  },
};
</script>

<style>
.no-album-info {
  text-align: center;
  color: lightgray;
  padding: 450rpx 0;
}
.form-item {
  margin: 20rpx auto;
  border-bottom: 1px solid grey;
  display: flex;
}
.album-thumbnail {
  border-bottom: 1px grey solid;
  padding: 20upx 30upx;
  display: flex;
}
.add-new {
  border-bottom: 1px grey solid;
  padding: 10upx;
  user-select: none;
  font-size: 2em;
  display: block !important;
  text-align: center;
  cursor: pointer;
}
.add-new:active,
.album-thumbnail:active {
  background-color: lightgrey;
}
.album-name {
  font-size: 1.1em;
}
.album-discription {
  font-size: 0.6em;
  color: grey;
}
.img-thumbnail {
  width: 120rpx !important;
  height: 120rpx !important;
}
.input-form {
  /* width: 100%; */
  border-bottom: grey 1px solid;
  font-size: 1em;
  padding: 0.5em 0.5em;
  display: flex;
  justify-content: space-between;
}
textarea {
  width: auto;
}
</style>